<template>
  <el-dialog :title="task.taskName" :visible="visible" @close="close()">
    <el-form>
      <el-form-item label="流程信息">
        <vue-json-editor class="handle-json-view" v-model="task.variables" :show-btns="false" :modes="['view']"
          mode="view" lang="zh"></vue-json-editor>
      </el-form-item>
      <el-form-item label="办理信息">
        <vue-json-editor class="handle-json-code" v-model="content" :expandedOnStart="true" :show-btns="false"
          :modes="['code']" mode="code" lang="zh"></vue-json-editor>
      </el-form-item>
      <el-form-item label="办理意见">
        <el-input type="text" v-model="comment"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close()">取 消</el-button>
      <el-button type="primary" @click="handleSubmitTask()">提 交</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import vueJsonEditor from 'vue-json-editor'
  import access from '../api/access.js'

  export default {
    data() {
      return {
        content: null,
        comment: null
      }
    },
    props: {
      task: {
        type: Object,
        default: {
          id: null,
          taskName: null,
          flowKey: null,
          nextKey: null,
          processInstanceId: null,
          name: null,
          variables: null
        }
      },
      visible: {
        type: Boolean,
        default: false
      }
    },
    components: {
      vueJsonEditor
    },
    watch: {
      visible(value, old) {
        if (value) {
          var temp = {}
          var context = {
            ...this.task
          }
          console.log(context)
          this.task.nextKey.forEach(e => temp[e] = null)
          this.content = temp
        }
      }
    },
    methods: {
      handleSubmitTask() {
        access.completeTask(this.task.processInstanceId, this.content, this.comment).then(res => {
          this.close()
          this.$emit('complete')
        }, res => {
          this.$message.error(res.message || '提交失败')
        })
      },
      close() {
        this.$emit('onClose')
      }
    }
  }
</script>

<style>
  .handle-json-view .jsoneditor,
  .handle-json-code .jsoneditor {
    min-height: 200px;
  }
</style>
